<template>
	<div class="user">
		<div class="serach">
			<el-input v-model="nickName" placeholder="请输入用户名称" style="width: 400px"></el-input>
			<el-button style="margin-left: 20px" type="primary" @click="getUserList">查询用户</el-button>
			<el-button type="success" @click="add">新增用户</el-button>
		</div>
		<div class="list">
			<el-table
				:data="tableData"
				style="width: 100%"
				:header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }"
			>
				<!-- <el-table-column type="index" label="序号"> </el-table-column> -->
				<el-table-column prop="nickName" label="用户名"> </el-table-column>
				<el-table-column prop="gender" label="性别">
					<template slot-scope="scope">
						{{ scope.row.gender == 1 ? '男' : '女' }}
					</template>
				</el-table-column>
				<el-table-column prop="address" label="地址"> </el-table-column>

				<el-table-column prop="telNumber" label="电话"> </el-table-column>
				<el-table-column prop="power" label="角色">
					<template slot-scope="scope">
						{{ scope.row.power == 1 ? '普通用户' : '管理员' }}
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="text" @click="edit(scope.row)">编辑</el-button>
						<el-button type="text" @click="del(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="page">
			<el-pagination
				align="center"
				background
				layout="total,prev, pager, next"
				:page-size="5"
				:total="total"
				@current-change="currentChange"
			>
			</el-pagination>
		</div>
		<el-dialog
			v-show="dialogVisible"
			:close-on-click-modal="false"
			:title="dialogTitle"
			:visible.sync="dialogVisible"
			width="40%"
		>
			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
				<el-form-item label="头像：">
					<el-upload
						class="avatar-uploader"
						action="https://jsonplaceholder.typicode.com/posts/"
						:http-request="upFile"
						:show-file-list="false"
					>
						<img v-if="form.avatarUrl" :src="$baseUrl + form.avatarUrl" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="用户名：" prop="nickName">
					<el-input v-model="form.nickName"></el-input>
				</el-form-item>
				<el-form-item label="性别：" prop="gender">
					<el-select v-model="form.gender" placeholder="请选择">
						<el-option label="男" value="1"> </el-option>
						<el-option label="女" value="2"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="地区：" prop="address">
					<el-cascader v-model="form.address" :options="options" placeholder=""></el-cascader>
				</el-form-item>
				<el-form-item label="电话：" prop="telNumber">
					<el-input v-model="form.telNumber"></el-input>
				</el-form-item>
				<el-form-item label="密码：" prop="password">
					<el-input v-model="form.password" :type="flag ? 'text' : 'password'" auto-complete="off">
						<i
							slot="suffix"
							:class="flag ? 'el-icon-minus' : 'el-icon-view'"
							style="margin-top: 16px; font-size: 18px"
							autocomplete="auto"
							@click="flag = !flag"
						/>
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import options from '@/utils/city';
	import { getUserList, upUser, deleteUser } from '@/api/admin';
	import { register, upFile } from '@/api/login';
	export default {
		data() {
			return {
				nickName: '',
				tableData: [],
				currPage: 1,
				total: 0,
				form: {
					nickName: '',
					address: '',
					telNumber: '',
					role: '',
				},
				dialogTitle: '新增用户',
				dialogVisible: false,
				flag: false,
				options,
				rules: {
					nickName: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
					gender: [{ required: true, trigger: 'change', message: '请选择性别' }],
					address: [{ required: true, trigger: 'change', message: '请选择地区' }],
					telNumber: [
						{
							required: true,
							validator: (rule, value, callback) => {
								let reg = /^1[345789]\d{9}$/;
								if (!reg.test(value)) {
									callback(new Error('请确认手机号格式正确'));
								} else {
									callback();
								}
							},
						},
					],
					password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
					confirmPassword: [
						{
							required: true,
							validator: (rule, value, callback) => {
								if (!value) {
									callback(new Error('请再次输入您的密码'));
								}
								if (value !== this.loginForm.password) {
									callback(new Error('请确认二次输入密码正确'));
								}
								callback();
							},
							trigger: 'blur',
						},
					],
				},
			};
		},
		created() {
			this.getUserList();
		},

		methods: {
			async getUserList() {
				let params = {
					currPage: this.currPage,
					pageSize: 5,
					nickName: this.nickName,
				};
				let data = await getUserList(params);
				this.tableData = data.data.data.list;
				this.total = data.data.data.total;
			},
			add() {
				this.dialogTitle = '新增用户';
				this.dialogVisible = true;
			},
			edit(row) {
				this.dialogVisible = true;
				this.form = { ...row, address: row.address.split('/') };
				this.dialogTitle = '编辑用户';
			},
			del(row) {
				this.$modal.confirm('确认要删除吗?').then(async () => {
					let params = { id: row.id };
					let res = await deleteUser(params);
					this.$modal.msgSuccess(res.data.msg);
					this.getUserList();
				});
			},
			async submit() {
				let valid = false;
				this.$refs['form'].validate((v) => (valid = v));
				if (!valid) return;
				if (this.dialogTitle == '新增用户') {
					let params = {
						...this.form,
						address: this.form.address.join('/'),
						id: '',
						power: 1,
					};
					let res = await register(params);
					this.$modal.msgSuccess(res.data.msg);
				}
				if (this.dialogTitle == '编辑用户') {
					let params = { ...this.form, address: this.form.address.join('/') };
					let res = await upUser(params);
					this.$modal.msgSuccess(res.data.msg);
				}
				this.getUserList();
				this.dialogVisible = false;
				this.$store.dispatch('GetUserInfo');
			},
			currentChange(v) {
				this.currPage = v;
				this.getUserList();
			},
			async upFile({ file }) {
				let params = new FormData();
				params.append('upFile', file);
				let res = await upFile(params);
				this.$set(this.form, 'avatarUrl', res.data.data.audioPath);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.user {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		.list {
			flex: 1;
		}
		.list,
		.page {
			margin-top: 20px;
		}
	}
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 50px;
		height: 50px;
		line-height: 50px;
		text-align: center;
	}
	.avatar {
		width: 50px;
		height: 50px;
		display: block;
	}
</style>
